<template>
	<div style="background-color: #ccc;" @touchstart="touchstart" @touchend="touchend">
		<div v-if="pageShow">
			<div class="header"></div>
			<div class="header2">
				<div style="display: inline-block;width: 20%;position: relative;" @click="bt1Click">首页<div
						:class="{'menuSelect':btTabIndex==1}"></div>
				</div>
				<div style="display: inline-block;width: 20%;position: relative;" @click="bt2Click">质保录入<div
						:class="{'menuSelect':btTabIndex==2}"></div>
				</div>
				<div style="display: inline-block;width: 20%;position: relative;" @click="bt3Click">质保查询<div
						:class="{'menuSelect':btTabIndex==3}"></div>
				</div>
				<div style="display: inline-block;width: 20%;position: relative;" @click="bt4Click">品牌中心<div
						:class="{'menuSelect':btTabIndex==4}"></div>
				</div>
				<div style="display: inline-block;width: 20%;position: relative;" @click="bt5Click">案例中心<div
						:class="{'menuSelect':btTabIndex==5}"></div>
				</div>
			</div>
			<!-- class="imgs slide-up-image-container slide-opacity-image"-->
			<div :class="{'imgs':true,'slide-up-image-container':true,'slide-opacity-image':active1}"
				:style="'background-image: url(\''+ imageList[0] +'\');z-index: '+ active1Zindex +';opacity: 0;'">
				<image :src="imgHttp + '/test/bg/logo.png'" :class="{'slide-up-image':active1_1}"
					style="width: 8em;height: 4.5em;margin-top: 5em;margin-left: 5%;"></image>
			</div>
			<div :class="{'imgs':true,'slide-up-image-container':true,'slide-opacity-image':active2}"
				:style="'background-image: url(\''+ imageList[1] +'\'); z-index: '+ active2Zindex +';opacity: 0;'">
				<div style="margin-top:12em;padding-right: 5%;" :class="{'slide-in-div':active2_1}">
					<div style="width: 14em;float: right;color: #fff;">
						<image :src="imgHttp + '/test/bg/logo.png'" style="width: 7em;height: 4.2em;"></image>
						<div style="border-bottom: 1px solid #fff;"></div>
						<div class="ur2_bts" style="margin-top: 0.5em;" @click="addjmd">申请加盟店</div>
						<div class="ur2_bts" style="margin-top: 0.5em;" @click="zblr">质保录入</div>
						<div style="font-size: 1em;margin-top: 0.5em;">与志同道合的人建立联系</div>
						<div style="font-size: 1em;margin-top: 0.3em;">分享专业知识、共创美好生活</div>
					</div>
					<div class="clear"></div>
				</div>
			</div>
			<!--质保查询-->
			<div :class="{'imgs':true,'slide-up-image-container':true,'slide-opacity-image':active3}"
				:style="'background-image: url(\''+ imageList[2] +'\'); z-index: '+ active3Zindex +';opacity: 0;'">
				<div style="margin-top:12em;padding-right: 5%;" :class="{'slide-in-div':active3_1}">
					<div style="width: 16em;float: right;color: #fff;font-size: 0.8em;">
						<div>Quality assurance query</div>
						<div style="font-size: 1.5em;margin-top: 0.5em;">质保查询</div>
						<div style="margin-top: 0.5em;">
							隐形车衣【质保范围】：黄变、脱胶、开裂、起泡、分层、
							腐蚀漆面（如若出现雨斑、水渍、变哑光现象，并经专业证
							实，一律按照产品价值5倍理赔）
						</div>
						<div class="ur2_bts" style="margin-top: 0.5em;" @click="serch">我要查询</div>
					</div>
					<div class="clear"></div>
				</div>
			</div>
			<!--品牌中心-->
			<div :class="{'imgs':true,'slide-up-image-container':true,'slide-opacity-image':active4}"
				:style="'background-image: url(\''+ imageList[3] +'\'); z-index: '+ active4Zindex +';opacity: 0;'">
				<div style="margin-top:12em;padding-left: 5%;" :class="{'slide-in-div':active4_1}">
					<div style="width: 16em;left: right;color: #fff;">
						<div>Products introduction</div>
						<div style="font-size: 2.3em;margin-top: 0.5em;">产品介绍</div>

						<div class="ur2_bts" style="margin-top: 2.5em;" @click="toXilie">查看更多</div>
					</div>
					<div class="clear"></div>
				</div>
			</div>
			<!--案例中心-->
			<div :class="{'imgs':true,'slide-up-image-container':true,'slide-opacity-image':active5}"
				:style="'background-image: url(\''+ imageList[4] +'\'); z-index:'+ active5Zindex +';opacity: 0;'">
				<!-- :class="{'slide-in-div':active5_1}"-->
				<div style="margin-top:4.5em;">
					<div style="text-align: center;opacity: 0;" :class="{'slide-circle-div':active5_1}"
						@click="toCase(caseObjs[0].id)">
						<image :src="imageList[5]" style="width: 55%;height: 22vh;"></image>
						<div style="width: 55%;margin: 0 auto;background-color: #000;color: #fff;text-align: center;">
							施工案例-奥迪</div>
					</div>
					<div style="text-align: center;margin-top: 0.5em;" :class="{'slide-circle-div2':active5_2}"
						@click="toCase(caseObjs[1].id)">
						<image :src="imageList[6]" style="width: 55%;height: 22vh;"></image>
						<div style="width: 55%;margin: 0 auto;background-color: #000;color: #fff;text-align: center;">
							施工案例-宝马</div>
					</div>
					<div style="text-align: center;margin-top: 0.5em;" :class="{'slide-circle-div3':active5_3}"
						@click="toCase(caseObjs[2].id)">
						<image :src="imageList[7]" style="width: 55%;height: 22vh;"></image>
						<div style="width: 55%;margin: 0 auto;background-color: #000;color: #fff;text-align: center;">
							施工案例-奔驰</div>
					</div>
				</div>
			</div>

		</div>

	</div>

</template>

<script>
	import api from '@/common/httprequest.js'
	export default {
		data() {
			return {
				imgHttp:api.getImgUrl(),
				caseObjs: [],
				btTabIndex: 1,
				touchData: {}, //滑动事件数据
				currentIndex: 0,
				imageList: ['/static/test/bg/111.jpg',
					'/static/test/bg/page2_bg.jpg',
					'/static/test/bg/page4_bg.jpg',
					'/static/test/bg/page3_bg.jpg',
					'/static/test/bg/page6_bg.jpg',
					'/static/test/anlizhongxin/audi.jpg',
					'/static/test/anlizhongxin/bmw.jpg',
					'/static/test/anlizhongxin/benz.jpg'
				],
				pageShow: false,
				currentzIndex: 4,
				active1: true,
				active1Zindex: 0,
				active1_1: true,
				active2: false,
				active2Zindex: 0,
				active2_1: false,
				active3: false,
				active3Zindex: 0,
				active3_1: false,
				active4: false,
				active4Zindex: 0,
				active4_1: false,
				active5: false,
				active5Zindex: 0,
				active5_1: false,
				active5_2: false,
				active5_3: false
			}
		},
		onShow() {
			uni.hideTabBar();
		},
		mounted() {
			this.loadData();
			uni.showLoading({
				title: '加载中，请稍后...'
			})
			this.loadImage();
		},
		methods: {
			toCase(id) {
				uni.redirectTo({
					url: '/pages/jmd/case?id=' + id
				})
			},
			loadData() {
				/*
				uni.showLoading({
					title: '数据处理中...'
				});
				*/
				api.request({
					method: "GET",
					url: "/applet/case/list",
					params: {
						"caShow": 0
					},
				}).then(res => {
					//uni.hideLoading();
					//alert(JSON.stringify(res));				
					if (res.code == 200) {
						this.caseObjs = res.rows;
						//alert(this.caseObjs);
					}
				});
			},
			//跳转到产品列表
			toXilie() {
				uni.redirectTo({
					url: '/pages/jmd/xilie'
				})
			},
			serch() {
				uni.redirectTo({
					url: '/pages/jmd/zbserch'
				})
			},
			//质保录入
			zblr() {
				uni.redirectTo({
					url: '../index/login'
				})
			},
			//申请加盟店
			addjmd() {
				uni.redirectTo({
					url: '../jmd/index'
				})
			},
			touchstart(e) {
				this.touchData.clientX = e.changedTouches[0].clientX;
				this.touchData.clientY = e.changedTouches[0].clientY;
			},
			touchend(e) {
				const subX = e.changedTouches[0].clientX - this.touchData.clientX;
				const subY = e.changedTouches[0].clientY - this.touchData.clientY;
				if (subY > 50) {
					if (this.btTabIndex > 1) {
						this.btTabIndex = this.btTabIndex - 1;
					}
					if (this.btTabIndex == 1) {
						this.bt1Click();
					} else if (this.btTabIndex == 2) {
						this.bt2Click();
					} else if (this.btTabIndex == 3) {
						this.bt3Click();
					} else if (this.btTabIndex == 4) {
						this.bt4Click();
					} else if (this.btTabIndex == 5) {
						this.bt5Click();
					}
					//alert('下滑');
				}
				if (subY < -50) {
					if (this.btTabIndex < 5) {
						this.btTabIndex = this.btTabIndex + 1;
					}
					if (this.btTabIndex == 1) {
						this.bt1Click();
					} else if (this.btTabIndex == 2) {
						this.bt2Click();
					} else if (this.btTabIndex == 3) {
						this.bt3Click();
					} else if (this.btTabIndex == 4) {
						this.bt4Click();
					} else if (this.btTabIndex == 5) {
						this.bt5Click();
					}
					//alert('上滑');
				}
				if (subX > 50) {
					console.log('右滑')
				}
				if (subX > -50) {
					console.log('左滑')
				}
			},
			loadImage() {
				/*
				//Image微信不支持，弃用
				// 创建Image对象
				var image = new Image();
				//var image = createCanvas().createImage()
				image.onload = () => {
					// 继续加载下一张图片
					this.currentIndex++;
					if (this.currentIndex < this.imageList.length) {
						this.loadImage();
					} else {
						this.pageShow = true;
						uni.hideLoading();
					}
				};
				// 设置图片加载失败的回调函数
				image.onerror = function() {
					// 加载失败处理逻辑
				};

				// 设置图片的src属性，开始加载图片
				image.src = this.imageList[this.currentIndex];
				*/
				let that = this; // 保存 this 的引用  
				uni.getImageInfo({
					src: this.imageList[this.currentIndex],
					success: function(image) {

						that.currentIndex++;
						if (that.currentIndex < that.imageList.length) {
							that.loadImage();
						} else {
							that.pageShow = true;
							uni.hideLoading();
						}
					}
				});

			},
			bt1Click() {
				this.currentzIndex++;
				this.active1Zindex = this.currentIndex;
				this.btTabIndex = 1;
				this.setItem1(true);
				this.setItem2(false);
				this.setItem3(false);
				this.setItem4(false);
				this.setItem5(false);
			},
			bt2Click() {
				this.currentzIndex++;
				this.active2Zindex = this.currentzIndex;
				this.btTabIndex = 2;
				this.setItem1(false);
				this.setItem2(true);
				this.setItem3(false);
				this.setItem4(false);
				this.setItem5(false);
			},
			bt3Click() {
				this.currentzIndex++;
				this.active3Zindex = this.currentzIndex;
				this.btTabIndex = 3;
				this.setItem1(false);
				this.setItem2(false);
				this.setItem3(true);
				this.setItem4(false);
				this.setItem5(false);
			},
			bt4Click() {
				this.currentzIndex++;
				this.active4Zindex = this.currentzIndex;
				this.btTabIndex = 4;
				this.setItem1(false);
				this.setItem2(false);
				this.setItem3(false);
				this.setItem4(true);
				this.setItem5(false);
			},
			bt5Click() {
				this.currentzIndex++;
				this.active5Zindex = this.currentzIndex;
				this.btTabIndex = 5;
				this.setItem1(false);
				this.setItem2(false);
				this.setItem3(false);
				this.setItem4(false);
				this.setItem5(true);
			},
			setItem1(boolVal) {
				if (boolVal) {
					this.active1 = true;
					this.active1_1 = true;
				} else {
					this.active1 = false;
					this.active1_1 = false;
				}
			},
			setItem2(boolVal) {
				if (boolVal) {
					this.active2 = true;
					this.active2_1 = true;
				} else {
					this.active2 = false;
					this.active2_1 = false;
				}
			},
			setItem3(boolVal) {
				if (boolVal) {
					this.active3 = true;
					this.active3_1 = true;
				} else {
					this.active3 = false;
					this.active3_1 = false;
				}
			},
			setItem4(boolVal) {
				if (boolVal) {
					this.active4 = true;
					this.active4_1 = true;
				} else {
					this.active4 = false;
					this.active4_1 = false;
				}
			},
			setItem5(boolVal) {
				if (boolVal) {
					this.active5 = true;
					this.active5_1 = true;
					this.active5_2 = true;
					this.active5_3 = true;
				} else {
					this.active5 = false;
					this.active5_1 = false;
					this.active5_2 = false;
					this.active5_3 = false;
				}
			}
		}
	}
</script>

<style>
	.menuSelect {
		z-index: -1;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: red;
		animation-name: slide-bglashen;
		animation-duration: 0.5s;
		/*动画速度*/
		animation-delay: 0s;
		/*多少秒后执行*/
		animation-fill-mode: forwards;
		opacity: 0;
	}

	@keyframes slide-bglashen {
		0% {
			transform: translateX(-100%);
			opacity: 0;
		}

		100% {
			transform: translateX(0);
			opacity: 1;
		}
	}


	.ur2_bts {
		border: 1px solid #fff;
		border-radius: 10px;
		text-align: center;
		height: 2em;
		line-height: 2em;
		color: #fff;
	}

	.imgs {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-position: center center;
		/* 水平居中和垂直居中 */
		background-size: cover;
		/* 可选，根据需要调整 */
		background-repeat: no-repeat;
		/* 防止背景图片重复 */
	}

	.header {
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		height: 2.5em;
		background: #DADADA;
		opacity: 0.7;
		z-index: 10000;
	}

	.header2 {
		text-align: center;
		color: #fff;
		font-size: 0.8em;
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		height: 2.5em;
		line-height: 3em;
		z-index: 10001;
	}

	.slide-up-image-container {
		overflow: hidden;
	}

	.slide-circle-div {
		animation-name: slide-circle;
		animation-duration: 2s;
		/*动画速度*/
		animation-delay: 1s;
		/*多少秒后执行*/
		animation-fill-mode: forwards;
		opacity: 0;
	}

	.slide-circle-div2 {
		animation-name: slide-circle;
		animation-duration: 2s;
		/*动画速度*/
		animation-delay: 2s;
		/*多少秒后执行*/
		animation-fill-mode: forwards;
		opacity: 0;
	}

	.slide-circle-div3 {
		animation-name: slide-circle;
		animation-duration: 2s;
		/*动画速度*/
		animation-delay: 3s;
		/*多少秒后执行*/
		animation-fill-mode: forwards;
		opacity: 0;
	}

	@keyframes slide-circle {
		0% {
			transform: translateX(-50%) rotate(0deg);
			opacity: 0;
		}

		100% {
			transform: translateX(0) rotate(360deg);
			opacity: 1;
		}
	}

	.slide-in-div {
		animation-name: slide-in;
		animation-duration: 2s;
		/*动画速度*/
		animation-delay: 1s;
		/*多少秒后执行*/
		animation-fill-mode: forwards;
		opacity: 0;
	}

	@keyframes slide-in {
		0% {
			transform: translateX(-50%);
			opacity: 0;
		}

		100% {
			transform: translateX(0);
			opacity: 1;
		}
	}

	.slide-up-image {
		animation-name: slide-up;
		animation-duration: 2s;
		/*动画速度*/
		animation-delay: 1s;
		/*多少秒后执行*/
		animation-fill-mode: forwards;
		opacity: 0;
		/* 初始化时图片透明以允许看到背景 */
	}

	@keyframes slide-up {
		0% {
			transform: translateY(100%);
			opacity: 0;
		}

		100% {
			transform: translateY(0);
			opacity: 1;
		}
	}

	.slide-opacity-image {
		animation-name: slide-opacity;
		animation-duration: 2s;
		/*动画速度*/
		animation-delay: 0s;
		/*多少秒后执行*/
		animation-fill-mode: forwards;
		opacity: 0;
		/* 初始化时图片透明以允许看到背景 */
	}

	@keyframes slide-opacity {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.clear {
		clear: both;
	}
</style>